<template>
  <l-layout class="l-tab-page multiaxisLine_demo">
    <l-panel>
      <template #toolLeft>
        <div style="width: 400px">
          <el-date-picker
            v-model="dateTime1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
          >
          </el-date-picker>
        </div>
        <el-button
          type="primary"
          size="mini"
          style="margin-left: 10px"
          @click="handleSelect"
          >查询</el-button
        >
        <el-button type="primary" size="mini" @click="handleSet"
          >设置</el-button
        >
      </template>
      <div>
        <l-echarts :option="lineOptions" style="height: 600px" v-if="isShow" />
      </div>
    </l-panel>
    <l-dialog
      :width="700"
      :height="500"
      :visible.sync="formVisible"
      title="曲线设置"
      @ok="handleSave"
      @close="handleCloseForm"
    >
      <visual-form ref="form" :valueArr.sync="valueArr"></visual-form>
    </l-dialog>
  </l-layout>
</template>

<script>
import lineData from "./lineData";
import visualForm from "./form.vue";
export default {
  components: { visualForm },
  data() {
    return {
      dateTime1: [
        new Date(2023, 7, 8, 1, 53, 0),
        new Date(2023, 7, 8, 23, 56, 1),
      ],
      activeName: "first",
      option: {
        animation: false,
        tooltip: {
          trigger: "axis",
        },
        legend: {
          bottom: 0,
          data: [],
        },
        xAxis: {
          type: "category",
          axisTick: {
            show: true,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
          data: [],
        },
        yAxis: [],
        grid: {
          show: true,
        },
        dataZoom: [
          {
            type: "inside",
          },
        ],
        series: [],
      },
      value: [],
      formVisible: false,
      formTitle: "",
      valueArr: ["y1", "y2", "y3", "y4", "y5", "y6"],
      isShow: true,
      dateTime2: [1691430780000, 1691510155233],
    };
  },
  computed: {
    lineOptions() {
      let option = this.$deepClone(this.option);
      let value = this.value;
      option.xAxis.name = "时间";
      option.xAxis.data = value[0].x || [];
      let yAxisList = ["m/s", "rpm", "kW", "V", "A", "deg"];
      option.legend.data = this.valueArr;
      let n = 0;
      let YMap = {};
      let colorMap = {};
      let ySettingColorlist = [
        "#12B302",
        "#5FC804",
        "#B6DB01",
        "#FF7B02",
        "#F1C600",
        "#FF321B",
      ];
      yAxisList.forEach((res) => {
        option.yAxis.push({
          type: "value",
          name: res,
          position:
            yAxisList.length == 2
              ? n < 1
                ? "left"
                : "right"
              : n < 3
              ? "left"
              : "right",
          scale: true,
          offset:
            yAxisList.length == 2
              ? 0
              : n > 2
              ? parseInt((n - 3) * 50)
              : parseInt(n * 50),
          axisLine: {
            show: true,
            lineStyle: {
              color: ySettingColorlist[n],
            },
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            interval: 0,
          },
        });
        YMap["y" + (n + 1)] = n;
        colorMap["y" + (n + 1)] = ySettingColorlist[n];
        n++;
      });
      value.map((item) => {
        this.valueArr.map((y) => {
          let valueY = item[y];
          if (valueY) {
            let name = y;
            let yIndex = YMap[y];
            let yColor = colorMap[y];
            let dataArr = valueY || [];
            option.series.push({
              type: "line",
              yAxisIndex: yIndex,
              data: dataArr,
              name: name,
              color: yColor,
            });
          }
        });
      });
      return option;
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let x = [];
      let y1 = [],
        y2 = [],
        y3 = [],
        y4 = [],
        y5 = [],
        y6 = [];
      lineData[1].map((item) => {
        if (item[0] > this.dateTime2[0] && item[0] < this.dateTime2[1]) {
          x.push(this.newDate(item[0]));
          if (this.valueArr.includes("y1")) y1.push(item[1]);
          if (this.valueArr.includes("y2")) y2.push(item[2]);
          if (this.valueArr.includes("y3")) y3.push(item[3]);
          if (this.valueArr.includes("y4")) y4.push(item[4]);
          if (this.valueArr.includes("y5")) y5.push(item[5]);
          if (this.valueArr.includes("y6")) y6.push(item[6]);
        }
      });
      this.value = [{ x, y1, y2, y3, y4, y5, y6 }];
    },
    handleSelect() {
      this.dateTime2 = [
        Date.parse(this.dateTime1[0]),
        Date.parse(this.dateTime1[1]),
      ];
      this.init();
      this.isShow = false;
      this.$nextTick(() => {
        this.isShow = true;
      });
    },
    newDate(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const hours = date.getHours();
      const minutes = date.getMinutes();
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },
    handleSet() {
      this.formVisible = true;
    },
    async handleSave(showLoading, hideLoading) {
      showLoading("保存数据中...");
      this.init();
      this.formVisible = false;
      this.isShow = false;
      this.$nextTick(() => {
        this.isShow = true;
      });
      hideLoading();
    },
    handleCloseForm() {
      this.formVisible = false;
    },
  },
};
</script>
<style lang="scss">
.multiaxisLine_demo {
  .multL_top {
    height: 100%;
    background: #fff;
    display: flex;
    align-items: center;
  }
  .i_font {
    font-size: 30px;
    margin: 0 30px;
  }
  i {
    cursor: pointer;
  }
  .el-checkbox {
    margin: 16px;
    display: block;
  }
}
</style>
